---
import allSections from 'other:sections.json';

const { items = [], framework, section } = Astro.props;
const sections = allSections.latest;

const frameworkLinks = Object.keys(sections).reduce((acc, framework) => {
  if (sections[framework].includes(section)) {
    return {
      ...acc,
      [framework]: `/docs/${framework}/${section}`
    };
  } else {
    return {
      ...acc,
      [framework]: `/docs/${framework}/${sections[framework][0]}`
    };
  }
}, {
  svelte: '',
  solid: '',
  react: '',
  element: '',
});

let frameworkTitle;
switch (framework) {
  case 'svelte':
    frameworkTitle = 'Svelte';
    break;
  case 'solid':
    frameworkTitle = 'Solid';
    break;
  case 'react':
    frameworkTitle = 'React/Preact';
    break;
  case 'element':
    frameworkTitle = 'Vanilla JS (Custom element)';
    break;
}
---

<sl-details>
  <span slot="summary">{frameworkTitle}</span>
  <ul class="framework-list">
    <li>
      <a
        href={frameworkLinks.svelte}
        aria-current={framework === 'svelte' ? 'true' : undefined}
        >
        Svelte
        </a>
    </li>
    <li>
      <a
        href={frameworkLinks.solid}
        aria-current={framework === 'solid' ? 'true' : undefined}
        >
        Solid
        </a>
    </li>
    <li>
      <a
        href={frameworkLinks.react}
        aria-current={framework === 'react' ? 'true' : undefined}
        >
        React/Preact
        </a>
    </li>
    <li>
      <a
        href={frameworkLinks.element}
        aria-current={framework === 'element' ? 'true' : undefined}
        >
        Vanilla JS (Custom element)
        </a>
    </li>
  </ul>
</sl-details>
<ul class="sections">
  {items.map((item) => (
    <li>
      <a
        href={`/docs/${framework}/${item.attributes.id}`}
        aria-current={item.attributes.id === section ? 'page' : undefined}
        >
        {item.attributes.section}
      </a>
      {!!item.attributes.subsections && (
        <ul class="subsections">
          {item.attributes.subsections.map((subsection) => (
            <li>
              <a
                href={`/docs/${framework}/${item.attributes.id}#${subsection.id}`}
                aria-label={`${item.attributes.section} - ${subsection.name}`}
                >
                {subsection.name}
              </a>
            </li>
          ))}
        </ul>
      )}
    </li>
  ))}
</ul>

<style>
  .sections {
    padding: 0;
    font-size: 1.2rem;
  }
  @media (min-width: 966px) {
    .sections {
      padding: 1rem 0;
    }
  }

  .sections, .subsections {
    list-style-type: none;
  }

  .subsections a {
    padding-left: 3rem;
  }

  a {
    display: inline-block;
    padding: 0.4rem 0;
    padding-left: 1.5rem;
    width: 100%;
    height: 100%;
    transition: background 0.1s;
  }

  a:hover {
    color: var(--primary-font-color);
    background: var(--header-background-hover);
  }

  a[aria-current="page"], a[aria-current="true"] {
    text-decoration: underline solid var(--primary-color);
    -webkit-text-decoration: underline solid var(--primary-color);
  }

  sl-details::part(base) {
    background: transparent;
    border: none;
    padding-top: 0.5rem;
  }

  sl-details::part(header) {
    padding-left: 1.5rem;
  }

  sl-details::part(header):focus {
    box-shadow: none;
  }

  sl-details::part(content) {
    padding: 0;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
  }

  sl-details.focus-visible::part(header):focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: none;
  }

  sl-details::part(header):hover {
    background: var(--header-background-hover);
  }

  sl-details::part(summary) {
    font-size: 1.2rem;
  }

  .framework-list {
    padding: 0;
    list-style-type: none;
  }

  .framework-list li a {
    padding-left: 3rem;
  }

  sl-details:not(:defined) [slot="summary"] {
    padding: 1rem;
    padding-left: 1.5rem;
    font-size: 1.2rem;
    display: block;
  }

</style>
